<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="管理" left-text left-arrow @click-left="$router.push({path:'/'})">
				</van-nav-bar>
				<div class="walletManagement">
					<div class="walletManagement-title">
						<van-cell is-link :title="walletName" :label="addressShow" to="WalletDetail">
							<div slot="icon">
								<img src="../../assets/images/walletManage1.png" width="45px" />
							</div>
						</van-cell>
					</div>
					<div class="walletManagement-content">
						<van-cell-group>
							<van-cell is-link title="密码提示信息" to="PasswordInfo">
								<div slot="icon">
									<img src="../../assets/images/walletManage2.png" width="25px" style="margin: 0 10px;" />
								</div>
							</van-cell>
							<van-cell is-link title="导出助记词" @click="isMnemonic('M')">
								<div slot="icon">
									<img src="../../assets/images/walletManage3.png" width="25px" style="margin: 0 10px;" />
								</div>
							</van-cell>
							<van-cell is-link title="导出私钥" @click="isMnemonic('P')">
								<div slot="icon">
									<img src="../../assets/images/walletManage4.png" width="25px" style="margin: 0 10px;" />
								</div>
							</van-cell>
							<van-cell is-link title="导出 Keystore" @click="isMnemonic('K')">
								<div slot="icon">
									<img src="../../assets/images/walletManage5.png" width="25px" style="margin: 0 10px;" />
								</div>
							</van-cell>
						</van-cell-group>
					</div>
					<div v-if="delWallet" class="walletManagement-title">
						<van-cell class="delete" @click="deleteWallet">
							<span>删除钱包</span>
						</van-cell>
					</div>
				</div>
				<van-dialog v-model="show" title="请输入密码" class="ExportMnemonic" show-cancel-button confirm-button-color="#0070e0" cancel-button-color="#0070e0" @confirm="getExport" @close="password = '';">
					<div class="ExportMnemonic-content">
						<van-field v-model="password" placeholder="" type="password"></van-field>
					</div>
				</van-dialog>
				<van-dialog v-model="show2" title="请输入密码" class="ExportMnemonic" show-cancel-button confirm-button-color="#0070e0" cancel-button-color="#0070e0" @confirm="getDel" @close="password2 = '';">
					<div class="ExportMnemonic-content">
						<van-field v-model="password2" placeholder="" type="password"></van-field>
					</div>
				</van-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import { assets } from '../../utils/api.js'
	let _this;
	export default {
		name: 'WalletManagement',
		components: {},
		props: {},
		data() {
			return {
				security: true,
				password: '',
				password2: '',
				show: false,
				show2:false,
				wallet: {},
				type: '',
				delWallet:true,
				walletName:'',
				addressShow:'',
				id:''
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getDel() {
				if(this.password2 === '') {
					this.$toast('密码不能为空');
					return false;
				}
				if(this.password2.length < 8) {
					this.$toast('密码不能小于8位数');
					return false;
				}
				assets.deleteWallet({
					id: id,
					password:password2
				}).then(res => {
					if(res.code == 200) {
					this.$toast('删除成功')
					}else{
						this.$toast(res.msg)
					}
				})
			},
			deleteWallet() {
				this.show = true;
			},
			getMyWallet() {
				assets.getMyWallet({
					type: 'ETH_NODE'
				}).then(res => {
					if(res.code == 200) {
						this.wallet = res.data[0];
						this.wallet.addressShow = this.wallet.address.substr(0, 15) + '...' + this.wallet.address.substr(this.wallet.address.length - 15, 15);
					}
				})
			},
			isMnemonic(type) {
				this.type = type;
				assets.getIsMnemonic({
					address: this.wallet.address
				}).then(res => {
					if(res.code == 200) {
						if(res.data) {
							this.show = true;
						} else {
							this.$toast('不可以导出助记词');
						}
					} else {
						this.$toast(res.msg);
					}
				})
			},
			getExport() {
				if(this.password === '') {
					this.$toast('密码不能为空');
					return false;
				}
				if(this.password.length < 8) {
					this.$toast('密码不能小于8位数');
					return false;
				}
				assets.getExport({
					address: this.wallet.address,
					password: this.password,
					exportType: this.type,
				}).then(res => {
					if(res.code == 200) {
						localStorage.Mnemonic = res.data;
						if(this.type == 'M') {
							localStorage.backUpBack = 'WalletManagement';
							this.$router.push({
								path: 'Backup'
							})
						} else {
							this.$router.push({
								path: 'Keystore',
								query: {
									type: this.type == 'K' ? 2 : 1,
								}
							})
						}
					} else {
						this.$toast(res.msg);
					}
				})
			}
		},
		created() {

		},
		mounted() {
			this.getMyWallet();
			let index = this.$route.params.index;
			this.addressShow = this.$route.params.address;
			this.walletName = this.$route.params.walletName;
			this.id = this.$route.params.id;
			if(index == 0) {
				this.delWallet = false;
			}
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: #f2f6f7;
		img,
		i {
			vertical-align: text-bottom;
		}
	}
	
	.walletManagement {
		.walletManagement-title {
			margin: 20px 0;
			.van-icon-arrow {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 16px;
			}
		}
		.van-cell__title {
			margin-left: 10px;
			span {
				color: #333333;
			}
		}
		.van-cell__label {
			color: #666666;
			margin-top: 0px;
		}
		.van-cell:not(:last-child)::after {
			left: 71px;
		}
	}
	
	.ExportMnemonic {
		background: #f2f6f7;
		border-radius: 7px;
		.van-cell {
			background: #f2f6f7;
		}
		/deep/.van-cell__value {
			background: #FFFFFF;
			padding: 5px 10px;
		}
	}
	.delete  {
	
		span {
			display: inline-block;
			text-align: center;
			width: 100%;
			color: rgb(211, 87, 59);
		}
	}
</style>